1- INTRODUCTION TO HTML 
HTML is stands for hypertext markup Language.
CSS stands for Casading style Sheet.  

Prerequires
1- having laptop to practice
2- Download visual studio code: https://code.visualstudio.com/

Look the History of HTML. as picture.

2- HTML File and HTML STRUCTURE EXPLAINED
HTML Files have an extension of .html to create HTML File.

HTML Structure
3. What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag.
see as picture and practice.

3- Heading, Paragraphs and Text Related Tags.

HTML headings are titles or subtitles that you want to display on a webpage.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML Headings

HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.

Note: Browsers automatically add some white space (a margin) before and after a heading.
Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.
<h1 style="font-size:60px;">Heading 1</h1>

HTML Paragraphs
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

HTML Display

You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.
The browser will automatically remove any extra spaces and lines when the page is displayed

Other UseFull Tags
1- <b> - Bold text.
2- <strong> - Important text.
3- <i> - Italic text.
4- <em> - Emphasized text.
5- <mark> - Marked text.
6- <small> - Smaller text.
7- <del> - Deleted text it strikesthrough as deleted text.
8- <sub> - Subscript text.
9- <sup> - Superscript text.
10- HTML <q> for Short Quotations
The HTML <q> tag defines a short quotation.
11- <bdo dir="rtl">This line will be written from right to left</bdo>

4- COMMENTS, EMPTY and LINKS in HTML
HTML Comment Tag
You can add comments to your HTML source by using the following syntax.
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the start tag, but not in the end.
Comments are not displayed by the browser, but they can help document your HTML source code.

Empty HTML Elements (Avoid Tag)
The <br> tag defines a line break, and is an empty element without closing tag.

Links in HTML
HTML links are defined with the <a> tag:  a--!>Anchor Tag.
The link's destination is specified in the href attribute  href--!>Relationship.
<a href="https://www.w3schools.com">This is a link</a>
Link two files together.

5- MEDIA IN HTML
IMAGES HTML are defined with the <img> tag.  img--!>Image.
The source file (src), alternative text (alt) is aslo WH provided as attributes:
<img src="gellebashir.jpg" alt="gelle image” width="104" height="142">

The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.

6- YOUTUBE VIDEO and AUDIO in HTML
The <audio> tag is used to embed sound content in a document, such as music or other audio streams.


7- LISTS in HTML
There are three types of HTML lists: ordered, unordered, and definition. 
Ordered lists use numbers.
Unordered lists use bullets.
Definition lists are used to define terminology.
Lists can be nested inside one another.

ORDERED LIST
 <ol> The ordered list is created with the <ol> element.
 <li> Each item in the list is placed  between an opening <li> tag  and a closing </li> tag. (The li stands for list item.)

UNORDERED LIST
<ul> The unordered list is created with the <ul> element. 
 <li> Each item in the list is placed  between an opening <li> tag  and a closing </li> tag. (The li stands for list item.)

DEFINITION Lists
 <dl>description list.  The definition list is created with  the <dl> element and usually consists of a series of terms and  their definitions. Inside the <dl> element you will usually see pairs of <dt> and  <dd> elements.
<dt> This is used to contain the term being defined (the definition term).
<dd>This is used to contain the definition.
